<template>
	<view class="container">
		<!-- 背景渐变层 -->
		<view class="background">
			<view class="header">
				<view class="main-title">Hello!</view>
				<view class="sub-title">欢迎使用蛋壳智慧养老服务平台</view>
			</view>
			
		</view>

		<!-- 登录卡片 -->
		<view class="login-card">
			
			<view class="header">
				<text class="main-title">登录</text>
			</view>

			<!-- 登录表单 -->
			<view class="form">
				<!-- 手机号输入 -->
				<t-input v-model="phone" class="input-item" placeholder="请输入手机号码"
					placeholder-style="color: #999;"></t-input>

				<!-- 验证码输入行 -->
				<view class="code-row">
					<t-input v-model="code" class="input-item" placeholder="验证码"
						placeholder-style="color: #999;"></t-input>
					<button class="send-btn" :disabled="isSending" @click="sendVerifyCode">
						{{ countdown > 0 ? `${countdown}s后重发` : '发送验证码' }}
					</button>
				</view>

				<!-- 密码登录切换 -->
				<text class="switch-login" @click="switchLoginType">密码登录</text>

				<!-- 登录按钮 -->
				<button class="login-btn" @click="handleLogin">登录</button>

				<!-- 协议勾选 -->
				<div class="agreement-container">
					<label class="radio-container" @click="toggleAgree">
						<!-- 修改后的radio input -->
						<input type="radio" v-model="agree" class="native-radio" :checked="agree">
						<!-- 自定义圆形按钮保持原样 -->
						<div class="custom-radio" :style="{
				      borderColor: agree ? '#2979FF' : '#999',
				      backgroundColor: agree ? '#2979FF' : 'transparent'
				    }">
							<div v-if="agree" class="inner-circle" />
						</div>
					</label>

					<span class="agreement-text">
						我已阅读并同意
						<view class="protocol-group" style="display: flex;">
							<a href="#" class="protocol-link">《隐私协议》</a>
							<span class="separator">和</span>
							<a href="#" class="protocol-link">《服务协议》</a>
						</view>
					</span>
				</div>
			</view>

			<view class="other-login">
				<!-- Divider.vue -->
				<div class="divider-container">
					<div class="divider-line" :style="{ backgroundColor: color }"></div>
					<div class="divider-text" :style="{ color }">
						<slot>其他登录方式</slot>
					</div>
					<div class="divider-line" :style="{ backgroundColor: color }"></div>
				</div>
				<div class="icons-container">
					<img src="https://www.ruanzi.net/jy/wxuser/103/images/pages/WeChat.png" alt="微信图标" class="icon" :style="wechatStyle" />
					<img src="https://www.ruanzi.net/jy/wxuser/103/images/pages/QQ.png" alt="QQ图标" class="icon" :style="qqStyle" />
				</div>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onShow
	} from '@dcloudio/uni-app';

	// 响应式数据
	const phone = ref('');
	const code = ref('');
	const password = ref('');
	const agree = ref(false);
	const isSending = ref(false);
	const countdown = ref(0);
	const isPasswordLogin = ref(false); // 登录方式切换

	const toggleAgree = () => {
		agree.value = !agree.value
	}


	// 发送验证码
	const sendVerifyCode = () => {
		if (!/^1[3-9]\d{9}$/.test(phone.value)) {
			return uni.showToast({
				title: '手机号格式错误',
				icon: 'none'
			});
		}
		isSending.value = true;
		countdown.value = 60;
		const timer = setInterval(() => {
			if (countdown.value <= 0) {
				clearInterval(timer);
				isSending.value = false;
				return;
			}
			countdown.value--;
		}, 1000);
	};

	// 切换登录方式
	const switchLoginType = () => {
		isPasswordLogin.value = !isPasswordLogin.value;
		code.value = '';
	};

	// 登录处理
	const handleLogin = () => {
		if (!agree.value) {
			return uni.showToast({
				title: '请先阅读并同意协议',
				icon: 'none'
			});
		}
		// 实际登录逻辑...
		uni.showLoading({
			title: '登录中...'
		});
		setTimeout(() => {
			uni.hideLoading();
			uni.showToast({
				title: '登录成功'
			});
		}, 1500);
	};
	const wechatStyle = {
		width: '48px',
		height: '48px',
		marginRight: '60rpx', // 保持与原始间距一致
		marginLeft: '176rpx'
	}

	const qqStyle = {
		width: '48px',
		height: '48px'
	}
</script>

<style lang="scss">
	.agreement-container {
		display: flex;
		align-items: center;
		background: white;
		padding: 12px;
		
		.radio-container {
			display: flex;
			align-items: center;
			cursor: pointer;
			margin-right: 8px;
			
			.native-radio {
				opacity: 0;
				position: absolute;
				width: 0;
				height: 0;
			}
			
			.custom-radio {
				width: 18px;
				height: 18px;
				border: 2px solid;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all 0.2s ease;
				
				.inner-circle {
					width: 8px;
					height: 8px;
					background: white;
					border-radius: 50%;
				}
			}
		}
	}

	.agreement-text {
		font-size: 10px;
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		color: #000;
		
		.protocol-group{
			.protocol-link {
				color: #2979FF;
				text-decoration: none;
			}
			.separator {
				padding: 0 4px;
			}
			
		}
	}

	

	

	
	
	
	

	.container {
		height: 100vh;
		position: relative;
		background-color: #D9E7F7;
		
		.background{
			.header{
				.main-title {
					display: block;
					font-size: 48rpx;
					color: #004572;
					font-weight: bold;
					margin-bottom: 20rpx;
					padding-top: 50px;
				}
				
				.sub-title {
					font-size: 28rpx;
					color: #004572;
				}
			}
			
		}

		.login-card {
			position: relative;
			width: 85%;
			margin: 20rpx auto 0;
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 60rpx 40rpx;
			box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
			
			.header{
				.main-title{
					color: #000;
					font-size: 24px;
					font-weight: bold;
				}
			}

			.form {
				margin-top: 60rpx;

				.input-item {
					border-bottom: 1rpx solid #eee;
					padding: 30rpx 0;
				}

				.code-row {
					display: flex;
					align-items: center;

					.send-btn {
						width: 200rpx;
						height: 70rpx;
						line-height: 70rpx;
						background: #2979FF;
						color: #fff;
						font-size: 26rpx;
						border-radius: 8rpx;
						margin-left: 20rpx;

						&[disabled] {
							background: #ccc;
						}
					}
				}

				.switch-login {
					color: #2979FF;
					font-size: 26rpx;
					margin: 30rpx 0;
					display: block;
				}

				.login-btn {
					height: 88rpx;
					line-height: 88rpx;
					background: #2979FF;
					color: #fff;
					font-size: 32rpx;
					border-radius: 44rpx;
					margin-top: 50rpx;
				}

				.agreement {
					display: flex;
					align-items: center;
					margin-top: 40rpx;

					.agreement-text {
						color: #666;
						font-size: 24rpx;
						margin-left: 10rpx;
					}
				}
			}

			

			

			

			.other-login {
				margin-top: 80rpx;
				text-align: center;
				
				.divider-container {
					display: flex;
					align-items: center;
					width: 100%;
					margin: 16px 0;
					
					.divider-line {
						flex: 1;
						height: 1px;
						background-color: #ddd;
					}
					
					.divider-text {
						padding: 0 12px;
						white-space: nowrap;
						font-size: 14px;
						color: var(--divider-color);
					}
				}

				.icons-container {
					display: flex;
					align-items: center;
					width: 100%;
					padding: 0 20rpx;
					
					.icon {
						object-fit: contain;
						display: block;
						/* 以下样式确保在不同设备上保持清晰 */
						image-rendering: -webkit-optimize-contrast;
						image-rendering: crisp-edges;
					}
				}
				
			}
		}
	}
</style>